﻿@using HotelManager.DataAccess
@model PagedList.IPagedList<Hotel>

@{
    ViewBag.Title = "Matched Hotels";
}

@section scripts
{
    <script type="text/javascript" src="@Url.Content("~/Template/js/jquery.raty.min.js")"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('dt').each(function () {
                var tis = $(this), state = false, answer = tis.next('dd').hide().css('height', 'auto').slideUp();
                tis.click(function () {
                    state = !state;
                    answer.slideToggle(state);
                    tis.toggleClass('active', state);
                });
            });

            $('.view-type li:first-child').addClass('active');

            $('#star').raty({
                //score: 3,
                click: function (score, evt) {
                    $('#stars-info').text(score + " or more");
                    $('#starinput').attr('value', score);
                }
            });
        });
    </script>
}

<!--main content-->
<div class="content clearfix">
    <!--breadcrumbs-->
    <nav role="navigation" class="breadcrumbs clearfix">
        <!--top right navigation-->
        <ul class="top-right-nav">
            <li><a href="@Url.Action("Index", "Home")" title="Change search">Change search</a></li>
        </ul>
        <!--//top right navigation-->
    </nav>
    <!--//breadcrumbs-->

    <!--sidebar-->
    @using (Ajax.BeginForm("Filter", "Search", new AjaxOptions { UpdateTargetId = "HotelList" }))
    {
        <aside class="left-sidebar">
            <article class="refine-search-results">
                <h2>Refine search results</h2>
                <dl>
                    <dt>Price</dt>
                    <dd>
                        <div class="checkbox">
                            <input type="checkbox" id="ch1" name="price" value="0" />
                            <label for="ch1">0 - 49 $</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" id="ch2" name="price" value="1" />
                            <label for="ch2">50 - 99 $</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" id="ch3" name="price" value="2" />
                            <label for="ch3">100 -199 $</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" id="ch4" name="price" value="3" />
                            <label for="ch4">200 $ +</label>
                        </div>
                    </dd>
                    <!--Star rating-->
                    <dt>Star rating</dt>
                    <dd>
                        <span class="stars-info" id="stars-info"></span>
                        <div id="star" data-rating="3"></div>
                        @Html.Hidden("starinput", 0)
                    </dd>
                    <!--//Star rating-->

                    <!--Hotel facilities-->
                    <dt>Hotel facilities</dt>
                    <dd>
                        @{
        List<Option> options = ViewBag.Options;
        foreach (var option in options)
        {
                            <div class="checkbox">
                                <input type="checkbox" name="selectedOption" value="@option.Id" />
                                @Html.Label(option.OptionName)
                            </div>
        }
                        }
                    </dd>
                    <!--//Hotel facilities-->
                </dl>
                <input class="gradient-button" type="submit" value="Filter" />
            </article>
        </aside>
    }
    <!--//sidebar-->

    <!--three-fourth content-->
    <section class="three-fourth">
        <div class="sort-by">
            <ul class="view-type">
                <li class="grid-view"><a href="#" title="grid view">grid view</a></li>
                <li class="list-view"><a href="#" title="list view">list view</a></li>
            </ul>
        </div>

        <div class="deals clearfix" id="HotelList">
            @Html.Partial("Hotels", Model)
        </div>
    </section>
    <!--//three-fourth content-->
</div>
<!--//main content-->
